<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
  <base href="<%=basePath%>">
  <title>private</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="<%=basePath%>css/user/style.css"/>
  
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="<%=basePath%>js/user/private/modernizr-1.5.min.js"></script>
  
  <script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.js"></script>
  <%--<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.js"></script> --%>
  <!--for pop layer-->
  <link rel="stylesheet" type="text/css" href="<%=basePath%>css/user/layer.css"/>
  <link rel="stylesheet" type="text/css" href="<%=basePath%>css/user/private.css"/>
  
  <script type="text/javascript" src="<%=basePath%>js/user/private/tipswindown.js"></script>
  <script type="text/javascript" src="<%=basePath%>js/user/private/layer.js"></script>
  
  <!-- for auto login -->
  <script type="text/javascript" src="<%=basePath%>js/jquery.md5.js"></script>
  
  <!-- for check pop form -->
  <script type="text/javascript" src="<%=basePath%>js/user/private/baseProf.js"></script>
  
  <style>
  	.info{
		font-size:80%;
		color:red;
		padding-left:3px;
	}
  </style>
  
  <script>
  		(function($){
  			$.fn.serializeJson = function(){
  				var serializeObj ={};
  				$(this.serializeArray()).each( function(){
  					serializeObj[this.name] = this.value;
  				}); 
  				return serializeObj;
  				//
  				/* var serializeObj ={};
  				var array = this.serialize();
  				$(array).each( function(){
  					if( serializeObj[this.name] ){
  						if( $.isArray( serializeObj[this.name]) ){
  							serializeObj[this.name].push(this.value);
  						}else{
  							serializeObj[this.name] = [serializeObj[this.name], this.value];
  						}
  					}else{
  						serializeObj[this.name] = this.value;
  					}
  				});
  				return serializeObj; */
  			};
  		})(jQuery);
  		
		$(document).ready(function(){
			$("#fill_User_Info1").click( popBasicForm );		//绑定单击事件
			$("#pop_msg_trig").click( popBscProfMsg );
			$("#pop_signinform_trig").click( popSinginForm );				//弹出签到 -->signin 不是注册
			if( parseInt( $("#userInfoLevel").val() )<1 ){	//单击以启动事件
				$("#fill_User_Info1").click();	//打开弹出窗口
			}
		});
		
		//弹出层调用//用于 错误 提示，命名时，未考虑周全，并仅限用于基本信息 配置错误 信息提示。
		function popBasicForm(){
			showTipsWindown("完善个人信息", 'user_info1_content', 500, 350);
		}
		function formClick(){
			$("#fill_User_Info1").click();
		}
		function popBscProfMsg(){
			showTipsWindown("错误提示", 'pop_msg_ct', 200, 20 );
		}
		
		function popSinginForm(){
			showTipsWindown("签到", 'signin_ct', 370, 95 );
		}
		
		function formItemListener1( elem ){
			$( elem ).bind( "mouseover", function(){
				$( this ).addClass( "shadow" );
			});
			
			$(elem ).bind( "focus", function(){
				$( this ).addClass( "focus" );
			});
			
			$(elem ).bind( "mouseout", function(){
				if( $( this ).hasClass( "shadow" ) ){
					$( this ).removeClass( "shadow" );
				}
			});
			
			$(elem).bind( "blur", function(){
				if( $( this ).hasClass( "focus" ) ){
					$( this ).removeClass( "focus" );
				}
				
				var idstr = $(this).attr( "id" );
				switch( idstr ){
					case "nickname":
						check_nickname();
						break;
					case "name":
						check_name();
						break;
					case "age" :
						check_age();
						break;
					case "QQ" :
						check_QQ();
						break;
					case "school" :
						check_school();
						break;
					case "academy" :
						check_academy();
						break;
					case "faculty" :
						check_faculty();
						break;
				}
			});
		}
		
		$(document).ready(function(){
			formItemListener1( 'input' );
			//formItemListener1( 'select' );
			
			$('#handin').click( function(){
				if( !(check_nickname()&&check_name()&&check_age()&&
					check_QQ()&&check_school()&&check_academy()&&check_faculty()) ){
					alert( "heeh" );
					return false;
				}else{
					return false;
				}
				var str = $('#user_info1').serialize();	//测试
				str = decodeURIComponent( str );
				//alert( str );
				//var jsondata = $('#user_info1').serializeJson();
				/*
				 * 1. 当提交该注册表时，应该将该层关掉;
				 * 2. 异步提交后，服务端若返回错误应当再次填写提交;
				 * 3. 填写正确，应该出现提示，并在三秒后自动关闭窗口;
				 */
				confirmTerm();	//关闭弹出窗口
				$.ajax({
					type:"post",
					url:"http://localhost:8080/sm3/private/bscProf!basicProfile",
					data:str,
					dataType:"text",
					//contentType:"text/html, charset=UTF-8",
					success:function( data ){
						//若出错
						var idx = data.search(/&/);	//正确 idx != -1
						if( idx != -1 ){
							data = data.substr( 0, data.search( /&/) );
						}
						//将信息添加进去
						$("#popMsgtxt").html( "　　" + data );
						//弹出提示
						$( "#pop_msg_trig" ).click();
						setTimeout( confirmTerm, 1600 );
						
						//若出错，再弹出提示
						if( idx == -1 ){
							setTimeout( formClick, 1610 );
						}else{
							window.location.reload();
						}
					},
					async:false
				});
				return false;
			});
			
			/*
			 * 当签到时若是补签则需要弹出 小窗口，若不是则不需要
			 */
			$( "#signIn" ).click( function(){
				
				//alert( "hehe" );
				//confirmTerm();	//关闭弹出窗口
				/* $.ajax({
					type:"post",
					url:"http://localhost:8080/sm3/private/stdAction!signIn",
					//contentType:"text/html, charset=UTF-8",
					success:function( data ){
						//若出错
						var idx = data.search(/&/);	//正确 idx != -1
						if( idx != -1 ){
							data = data.substr( 0, data.search( /&/) );
						}
						//将信息添加进去
						$("#popMsgtxt").html( "　　" + data );
						//弹出提示
						$( "#pop_msg_trig" ).click();
						setTimeout( confirmTerm, 1600 );
					},
					async:false
				}); */
				return false;  
			});
			
			$("#petite").click( function(){
				//alert( "heh" );
				$( "#pop_signinform_trig" ).click();
				//setTimeout( confirmTerm, 1600 );
			});
		});
  </script>
  
  <style type="text/css">
  	.course_content{
  		padding:10px 0 10px 32px;
  	}
  	.course_content h3{
  		color:#666;
  		font-weight:bold;
  		font-size:15px;
  	}
  	.course{
  		width:137px;
  		height:24px;
  		background:#fff;
  		font-size:1.1em;
  		color:#666;
  		text-align:center;
  	}
  	
  	.course_content option{
  		text-align:left;
  	}
		  	
  	.course_content option.desc{
  		text-align:center;
  	}
  	
  	.course_content .course_sbmt{
  		margin-left:10px;
  		padding:2px 4px;
  		border-style:outset;/*368052*/
  	}
  	
  	.slct_number{
  		width:80px;
  		/*margin-left:10px;*/
  	}
  </style>
  
</head>

<body>
  <div id="main">
  	<div id="pop_layer" style="display:none">
	  <a href="#" id="fill_User_Info1">fillInfo</a>
	  <a href="#" id="pop_msg_trig">ProfileMessage</a>
	  <a href="#" id="pop_signinform_trig">ProfileMessage</a>
	</div>
	
	<div id="pop_msg_ct" style="display:none">
		<span id="popMsgtxt"></span>
	</div>
	
	<div id="user_info1_content" style="display:none">
	
		<div class="form_content">
			<form name="user_info1" id="user_info1" class="demo-section" method="post">
				<p>
					<label for="nickname">呢　　称：<label>
					<input id="nickname" name="user.nickname" value="塔利班的帅哥" type="text" class="radius inputStyle"/>
					<span id="nicknameInfo" class="info"></span>
				</p>
				
				<p>
					<label for="name">姓　　名：</label>
					<input type="text" id=name" name="user.name" value="如花" class="radius inputStyle"/>
					<span id="nameInfo" class="info"></span>
				</p>
				<!-- <p>
					<label for="sex">性　　别：</label>
					<select id="sex" name="user.sex" value="" class="radius selectStyle" >
						<option value="1">男</option>
						<option value="0">女</option>
					</select>
				</p> -->
				
				<p>
					<label for="age">年　　龄：</label>
					<input type="text" id="age" onblur="check_age()" name="user.age" value="20" class="radius inputStyle"/>
					<span id="ageInfo" class="info"></span>
				</p>
				
				
				<!--<p>
					<label for="birth">生　　日：</label>
					<input type="text" id="birth" name="birth" onclick="new Calendar().show( this );" readonly="readonly" size="10" maxlength="10" value="2012-12-21" class="radius inputStyle"/>
				</p>-->
				<p>
					<label for="QQ">QQ 账 号：<label>
					<input id="QQ" name="user.qq" value="492788802" type="text" class="radius inputStyle"/>
					<span id="QQInfo" class="info"></span>
				</p>
				
				<p>
					<label for="school">在读学校：</label>
					<input type="text" id="school" name="userEdu.school" value="中国真爱大学" class="radius inputStyle" />
					<span id="schoolInfo" class="info"></span>
				</p>
				
				<p>
					<label for="academy">所在学院：</label>
					<input type="text" id="academy" name="userEdu.academy" value="实践学院" class="radius inputStyle"/>
					<span id="academyInfo"  class="info"></span>
				</p>
					
				<p>
					<label for="faculty">所学专业：</label>
					<input type="text" id="faculty" name="userEdu.faculty" value="动作指导" name="faculty" class="radius inputStyle"/>
					<span id="facultyInfo"  class="info"></span>
				</p>
				
				<p class="submit_container">
					<label for="handin">　　　　　<label>
					<input id="handin" name="handin" value="完成并已阅读注册协议" type="button" class="radius inputStyle submit"/>
				</p>

				<!--<p>
					<label for="address">居住城镇：</label>
					<input type="text" id="address" value="真爱省情感市怡春区秀色路" class="radius inputStyle" />
				</p>-->
				
				<!--<p>
					<label for="address">居住城镇：</label>
					<input type="text" id="address" value="真爱省情感市怡春区秀色路" class="radius inputStyle" />
				</p>-->
				<input id="userInfoLevel" name="user.infoLevel" value="${user.infoLevel}" type="hidden" class="radius inputStyle"/>
			</form>
		</div>
	</div>
  
	<div id="signin_ct" style="display:none">
		<div class="form_content course_content">
			<h3>请选择补修内容</h3>
			<form id="sign_form" name="sign_form">
				<input type="hidden" value="user.id"/>
				<input type="hidden" value="2" name="type"/>
				<select id="cs_course" name="course" class="radius course">
					<option value="null" class="desc">---请选择课程---</option>
					<option value="CoreJava">CoreJava</option>
					<option value="JDBC">JDBC</option>
					<option value="Oracle">Oracle</option>
					<option value="HTML/CSS/XML">HTML/CSS/XML</option>
					<option value="JavaScript">JavaScript</option>
					<option value="JSP/Servlet">JSP/Servlet</option>
					<option value="Struts">Struts</option>
					<option value="Hibernate">Hibernate</option>
					<option value="Spring">Spring</option>
					<option value="Android">Android</option>
				</select>
				<select id="cs_schedule" name="schedule" class="radius course slct_number">
					<option value="0" class="desc">进度</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
				<button id="handin_cs" type="button" value="确定补修" class="radius course_sbmt">确定补修</button>
			</form>
		</div>
	</div>
  	
    <header>
      <div id="logo">
        <div id="logo_text">
          <br><br><!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="#">Tarena<span class="logo_colour">_Java</span></a></h1>
          <h2>Student. Managerment. Java Developer.</h2>
        </div>
      
      </div>
      <nav>
        <ul class="sf-menu" id="nav">
          <li class="current"><a href="#">Home</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">A Page</a></li>
          <li><a href="#">Another Page</a></li>
          <li><a href="#">Example Drop Down</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        
        <ul class="sf-menu" id="sign">
			<li>
				<a id="signIn" href="javascript:">签到</a>
				<ul>
					<li><a id="petite" href="javascript:">补修</a></li>
				</ul>
			</li>
		</ul>
      </nav>
    </header>

	
    <div id="site_content">
	  <div id="sidebar_container">
		  <div class="sidebar">
			<div class="colLeft"><img src="<%=basePath%>images/private/person.png" alt="John Bunton"></div>
		  </div>
	  </div>

	  <div class="content">
    	<div class="colRight description about">
            <h1>${user.proxyName}</h1>
            <h2>Front End Developer</h2>
			<div class="content_item">
				<p>
					Lorem Ipsum is simply dummy text of the printing and 
					typesetting industry. Lorem Ipsum has been the 
					industry's standard dummy text ever since the 1500s, 
					when an unknown printer took a galley of type and 
					scrambled it to 
				</p>
			</div>
			<div class="sidebar_item">
				<ul>
					<li><a href="#">john.bunton@gmail.com</a></li>
					<li><a href="#">www.JohnBunton.com</a></li>
					<li><a href="#">(394) 291-2827</a></li>
				</ul>
			</div>
        </div>
	  </div>
	</div>
    <footer>
      <p><a href="#">Home</a> | <a href="examples.html">Examples</a> | <a href="#">A Page</a> | <a href="#">Another Page</a> | <a href="#">Contact Us</a></p>
      <p>Copyright &copy; NB-Tarena | <a href="#">Managerment</a></p>
    </footer>
  </div>

  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="<%=basePath%>js/user/private/jquery.easing-sooper.js"></script>
  <script type="text/javascript" src="<%=basePath%>js/user/private/jquery.sooperfish.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
    });
  </script>
  
  <%-- <s:debug></s:debug> --%>
</body>
</html>